<template>
    <div style="font-style:normal; display:flex; align-items: center; letter-spacing: normal; ">
        <div class='time'>{{ timeArr[1] }}</div>
        <div style="font-size:var(--12FontSize); color:rgba(255, 255, 255, 0.65)">{{ weekObj[week] + ' ' + timeArr[0] }}</div>
    </div>
</template>
<script setup>
    import { ref, reactive, computed, onMounted } from 'vue';
    import { getToday } from '@/utils/parseDate';
    const curTime = ref(getToday(3));
    const weekObj = {
        0:'周日',
        1:'周一',
        2:'周二',
        3:'周三',
        4:'周四',
        5:'周五',
        6:'周六',
    }
    let timer = null;
    let week = new Date().getDay();

    onMounted(()=>{
        timer = setInterval(()=>{
            curTime.value = getToday(3);
        })
    })
    const timeArr = computed(()=>{
        return curTime.value.split(' ');
    })

</script>

<style scoped>
    @font-face {
        font-family: "selfFont";
        src:url('@/assets/Quartz Regular.ttf');
    }
    .time {
        font-size:var(--36FontSize);
        font-family: selfFont;
        color:#fff;
        margin-right:var(--sPadding);
        letter-spacing: 0.2vw;
    }

</style>
